<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <h1 class="centered-text">日常考试训练须知</h1>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="centered-text">
        <div class="center">
          <span class="left-span">1、考试时间为20分钟,答完题可以点击“提交”,超出时间则自动交</span><br />
          <span class="left-span">卷；</span><br />

          <span class="left-span">2.考试采用100制,题数为20道,每题5分,分单选,判断,和多选,</span><br />
          <span class="left-span">多选题少选多选均不得分；</span><br />

          <span class="left-span">3.考试90分合格,不记入考核;</span><br />

          <span class="left-span">4.题目是对应类型题库里随机抽的;</span><br />
        </div>
      </div>
    </el-card>

    <el-card>
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column label="#" width="50">
          <template slot-scope="scope">
            {{
              (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="科目名称" width="300">
        </el-table-column>
        <el-table-column prop="desc" label="科目详情">
        </el-table-column>
        <el-table-column prop="edit" label="操作栏" width="600">
          <template slot-scope="scope">
            <el-button type="primary" @click="startExam(scope.row.id)">开始考试</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo" :page-sizes="[5, 10, 50, 100]" :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <!-- 弹出考试框 -->
    <el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" :close-on-click-modal="false" :show-close="false">
      <template v-slot:title>
        <div style="text-align: center; position: fixed; width: 100%; padding: 0px; top: 0;">
          <h1>{{ examForm.title }}</h1>
          <p>考生姓名:{{ nick_name }}</p>
          <p>考试倒计时: {{ minutes }} 分 {{ seconds }} 秒</p>
        </div>
      </template>
      <el-form :model="examForm" style="margin-top: 80px;">
        <h2  v-if="examForm.other_paper_list.length > 0">选择。(共{{ examForm.other_paper_list.length }}题)</h2>
        <div v-for="(option, index) in examForm.other_paper_list">
          <!-- 单选 -->
          <div v-if="option.questionType == 'xz'">
            <h3>{{ index + 1 }}.({{ option.question_type_ch }})({{ option.score }}分){{ option.content }}</h3>
            <el-radio-group v-model="option.examinee_answer">
              <el-radio label="A">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_a }}</p>
                </div>
              </el-radio><br>
              <el-radio label="B">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_b }}</p>
                </div>
              </el-radio><br>
              <el-radio label="C">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_c }}</p>
                </div>
              </el-radio><br>
              <el-radio label="D">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_d }}</p>
                </div>
              </el-radio>
            </el-radio-group>
          </div>
          <!-- 多选 -->
          <div v-else-if="option.questionType == 'mxz'">
            <h3>{{ index + 1 }}.({{ option.question_type_ch }})({{ option.score }}分){{ option.content }}</h3>
            <el-checkbox-group v-model="option.examinee_answers">
              <el-checkbox label="A">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_a }}</p>
                </div>
              </el-checkbox><br>
              <el-checkbox label="B">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_b }}</p>
                </div>
              </el-checkbox><br>
              <el-checkbox label="C">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_c }}</p>
                </div>
              </el-checkbox><br>
              <el-checkbox label="D">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">{{ option.choice_d }}</p>
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- 判断 -->
          <div v-else-if="option.questionType == 'pd'">
            <h3>{{ index + 1 }}.({{ option.question_type_ch }})({{ option.score }}分){{ option.content }}</h3>
            <el-radio-group v-model="option.examinee_answer">
              <el-radio label="对">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">对</p>
                </div>
              </el-radio><br>
              <el-radio label="错">
                <div class="option-wrapper" @click.stop.prevent>
                  <p class="option">错</p>
                </div>
              </el-radio>
            </el-radio-group>
          </div>

        </div>

        <!-- 判断 -->
        <div class="no-copy-paste">
          <h2 v-if="examForm.pd_paper_list.length > 0">判断。(共{{ examForm.pd_paper_list.length }}题)</h2>
          <div v-for="(option, index) in examForm.pd_paper_list">
            <!-- 判断 -->
            <div v-if="option.questionType == 'pd'">
              <h3>{{ index + 1 }}.({{ option.question_type_ch }})({{ option.score }}分){{ option.content }}</h3>
              <el-radio-group v-model="option.examinee_answer">
                <el-radio label="对">
                  <div class="option-wrapper" @click.stop.prevent>
                    <p class="option">对</p>
                  </div>
                </el-radio><br>
                <el-radio label="错">
                  <div class="option-wrapper" @click.stop.prevent>
                    <p class="option">错</p>
                  </div>
                </el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer" style="position: fixed; bottom: 10px; width: 100%;">
        <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
        <div style="text-align: center;">
          <el-button type="primary" @click="submitExam" style="width: 150px;">交 卷</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import testApi from '@/api/testMange';
import { mapGetters } from 'vuex';
export default {
  methods: {
    // handleOptionClick(option, selectedOption) {
    //   // 在这里执行赋值逻辑,selectedOption 就是选中的选项值
    //   option.examinee_answers = selectedOption;
    //   // 或者其他你需要执行的逻辑
    // },
    startCountdown() {
      this.countdownTimer = setInterval(() => {
        if (this.examForm.countdown > 0) {
          this.examForm.countdown--;
        } else if (this.examForm.countdown == -1) {

        } else {
          // 提交表单到后台
          testApi.submitExam(this.examForm).then((reponse) => {
            // 关闭弹窗
            this.dialogFormVisible = false;
            // 提示提交成功
            this.$message({
              message: reponse.message,
              type: "success",
            });
          });
          // 在计时结束后执行相应操作,例如关闭对话框
          this.dialogFormVisible = false;
          clearInterval(this.countdownTimer);
        }
      }, 1000);
    },
    submitExam() {
      let isValid = true;
      // 遍历题目校验
      // this.examForm.options.forEach(option => {
      //   if (!option.examinee_answer && option.examinee_answers.length == 0) {
      //     // 选项没有值  
      //     isValid = false;
      //     return false;
      //   }
      // })

      // 提交其他逻辑
      if (isValid) {
        // 通过验证
        // 提交表单到后台
        testApi.submitExam(this.examForm).then((reponse) => {
          // 关闭弹窗
          this.dialogFormVisible = false;
          // 提示提交成功
          this.$message({
            message: reponse.message,
            type: "success",
          });
          // 刷新页面
          // this.getTestTitleList();
        });
      } else {
        // 失败 
        this.$message({
          message: "有题目未作答",
          type: "error",
        });
        console.log("error submit!!");
        return false;
      }
      // // 表单验证
      // this.$refs.examFormRef.validate((valid) => {
      //   if (valid) {
      //     // 提交表单到后台
      //     testApi.submitExam(this.examForm).then((reponse) => {
      //       // 关闭弹窗
      //       this.dialogFormVisible = false;
      //       // 提示提交成功
      //       this.$message({
      //         message: reponse.message,
      //         type: "success",
      //       });
      //       // 刷新页面
      //       // this.getTestTitleList();
      //     });
      //   } else {
      //     console.log("error submit!!");
      //     return false;
      //   }
      // });
    },
    startExam(id) {
      testApi.startTestById(id).then((response => {
        this.examForm = response.data;
        this.dialogFormVisible = true;
      }))
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    getTestTitleList() {
      testApi.getTestTitleList(this.searchModel).then((response) => {
        this.total = response.data.total;
        this.tableData = response.data.test_title;
      });
    },
    handleSizeChange(pageSize) {
      this.searchModel.pageSize = pageSize;
      this.getTestTitleList();
    },
    handleCurrentChange(pageNo) {
      this.searchModel.pageNo = pageNo;
      this.getTestTitleList();
    },
  },
  created() {
    this.getTestTitleList();
  },
  computed: {
    ...mapGetters([
      // 'name',
      // 'is_super',
      'nick_name'
    ]),
    minutes() {
      return Math.floor(this.examForm.countdown / 60);
    },
    seconds() {
      return this.examForm.countdown % 60;
    },
  },
  mounted() {
    this.startCountdown();
  },
  beforeDestroy() {
    clearInterval(this.countdownTimer);
  },
  data() {
    return {
      // rules: {
      //   // [`options.${index}.examinee_answer`]: [
      //   //   { required: true, message: '必填' },
      //   //   // ...其他规则
      //   // ],
      // },
      radioValue: '',
      countdownTimer: null,
      dialogFormVisible: false,
      examForm: {
        title: "",
        countdown: -1,
        other_paper_list: [
          // {
          //   "id": "1",
          //   "questionType": "xz",
          //   "answer": "",
          //   "content": "1",
          //   "choice_a": "A",
          //   "choice_b": "B",
          //   "choice_c": "C",
          //   "choice_d": "D",
          // }, {
          //   "id": "2",
          //   "questionType": "mxz",
          //   "answers": ["A", "B", "C"],
          //   "content": "2",
          //   "choice_a": "A1",
          //   "choice_b": "B1",
          //   "choice_c": "C1",
          //   "choice_d": "D1",
          // }
        ],
        pd_paper_list: [],
      },
      formLabelWidth: '120px',
      title: "",
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 5,
      },
      tableData: [
        // {
        //   id: "1",
        //   subject: "运维手册",
        // },
        // {
        //   id: "2",
        //   subject: "运维技术",
        // },
      ],
    };
  },
};
</script>

<style>
body {
  user-select: none;
  /* 禁止用户选择文本 */
}

.centered-text {
  text-align: center;
  /* display: block; */
}

.center {
  display: inline-block;
  text-align: left;
}

.left-span {
  /* text-align: left; */
  display: block;
}

.option {
  white-space: pre-wrap;
  max-width: 1400px;
}


.option-wrapper {
  display: inline-block;
  vertical-align: top;
  margin-top: -15px;
}
</style>